<template>
  <div class="feed-card">
    <div
      class="video-img-panel"
      @mouseover="startVideoCover"
      @mouseout="outVideoCover"
    >
      <div v-show="!isPlayCardVideo" class="pictrue_cover">
        <img :src="props.VideoItem.previewImgUrl" />
        <!-- 播放次数 -->
        <div class="play-counts">
          654
        </div>
        <!-- 评论数 -->
        <div class="comment-counts">
          12
        </div>
        <!-- 放置时间 -->
        <div class="duraing-time">02:21</div>
      </div>
      <div v-show="isPlayCardVideo" class="video_cover">
        <video
          :style="{ width: videoWidth, height: videoHeight }"
          preload="none"
          ref="videoRef"
          :src="props.VideoItem.videoSrc"
          muted
          @canplaythrough="videoCanPlay"
          @timeupdate="updateProgress"
        ></video>
        <!-- 放置时间 -->
        <div class="play-time">
          {{ formattedCurrentTime }}/{{ formattedDuration }}
        </div>
      </div>
    </div>
    <div class="video-card__info">
      <div class="video-card__info--right">
        <h3 class="title">
          {{ props.VideoItem.title }}
        </h3>
        <div class="video-card__info--bottom">
          <a href="#" class="video-card__info--owner">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 24 24"
              width="24"
              height="24"
              fill="currentColor"
              class="bili-video-card__info--owner__up"
            >
              <!--[-->
              <path
                d="M6.15 8.24805C6.5642 8.24805 6.9 8.58383 6.9 8.99805L6.9 12.7741C6.9 13.5881 7.55988 14.248 8.3739 14.248C9.18791 14.248 9.8478 13.5881 9.8478 12.7741L9.8478 8.99805C9.8478 8.58383 10.1836 8.24805 10.5978 8.24805C11.012 8.24805 11.3478 8.58383 11.3478 8.99805L11.3478 12.7741C11.3478 14.41655 10.01635 15.748 8.3739 15.748C6.73146 15.748 5.4 14.41655 5.4 12.7741L5.4 8.99805C5.4 8.58383 5.73578 8.24805 6.15 8.24805z"
                fill="currentColor"
              ></path>
              <path
                d="M12.6522 8.99805C12.6522 8.58383 12.98795 8.24805 13.4022 8.24805L15.725 8.24805C17.31285 8.24805 18.6 9.53522 18.6 11.123C18.6 12.71085 17.31285 13.998 15.725 13.998L14.1522 13.998L14.1522 14.998C14.1522 15.4122 13.8164 15.748 13.4022 15.748C12.98795 15.748 12.6522 15.4122 12.6522 14.998L12.6522 8.99805zM14.1522 12.498L15.725 12.498C16.4844 12.498 17.1 11.8824 17.1 11.123C17.1 10.36365 16.4844 9.74804 15.725 9.74804L14.1522 9.74804L14.1522 12.498z"
                fill="currentColor"
              ></path>
              <path
                d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z"
                fill="currentColor"
              ></path>
              <!--]-->
            </svg>
            <span class="video-card__info--author">{{
              props.VideoItem.author
            }}</span>
            <span class="video-card__info--date">{{
              props.VideoItem.date
            }}</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
const videoRef = ref(null);
const isPlayCardVideo = ref(false);
const videoWidth = ref("100%"); // 初始化视频宽度
const videoHeight = ref("auto"); // 初始化视频高度
const playTime = ref(0 || "00.00"); //当前播放时间
const durationTime = ref(0 || "00.00"); //当前视频总时长

//对外暴露属性提供对外服务
const props = defineProps({
  VideoItem: {
    type: Object,
  },
});

// 格式化时间
const formatTime = (time) => {
  const minutes = Math.floor(time / 60);
  const seconds = Math.floor(time % 60);
  return `${minutes < 10 ? "0" : ""}${minutes}:${
    seconds < 10 ? "0" : ""
  }${seconds}`;
};

// 计算属性，格式化当前时间和总时长
const formattedCurrentTime = computed(() => formatTime(playTime.value));
const formattedDuration = computed(() => formatTime(durationTime.value));

// 更新时间
const updateProgress = (event) => {
  const { currentTime, duration } = event.target;
  playTime.value = currentTime; // 更新当前时间
  durationTime.value = duration; // 更新总时长
};

// 切换视频封面显示
const startVideoCover = () => {
  if (!isPlayCardVideo.value) {
    isPlayCardVideo.value = true;
    if (videoRef.value) {
      videoRef.value.play().catch((error) => {
        // console.error("播放失败:", error);
      });
    }
  }
};

// 隐藏视频封面并暂停视频
const outVideoCover = () => {
  if (isPlayCardVideo.value) {
    isPlayCardVideo.value = false;
    videoRef.value.pause();
  }
};

// 当视频可以播放时，开始播放
const videoCanPlay = () => {
  if (isPlayCardVideo.value) {
    // 资源加载完成，现在可以安全地播放
    videoRef.value.play().catch((error) => {
      //   console.error("播放失败:", error);
    });
  }
};

// 更新视频尺寸以适应容器
const updateVideoSize = () => {
  if (isPlayCardVideo.value) {
    const panelWidth = document.querySelector(".video-img-panel").clientWidth;
    const panelHeight = document.querySelector(".video-img-panel").clientHeight;
    videoWidth.value = `${panelWidth}px`;
    videoHeight.value = `${panelHeight}px`;
  }
};

onMounted(() => {
  updateVideoSize();
  window.addEventListener("resize", updateVideoSize);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateVideoSize);
});
</script>

<style lang="scss" scoped>
h3 {
  margin: 0;
  padding: 0;
}

a {
  color: #9499a0;
  text-decoration: none;
}

.feed-card {
  position: relative;
  text-align: left;
  min-width: 240px;
  min-height: 208px;
  display: flex;
  flex-direction: column;
  background: #fff;
  cursor: pointer;

  .video-img-panel {
    position: relative;
    min-width: 240px;
    min-height: 135px;
    width: 100%; /* 使图片div宽度自适应容器宽度 */
    background-size: cover; /* 确保图片覆盖整个div，不被拉伸 */
    border-radius: 6px;
    overflow: hidden; /* 防止内容溢出 */

    .pictrue_cover,
    .video_cover {
      position: relative;
      width: 100%;
      min-height: 135px;
      height: 100%;
      opacity: 1; // 初始时不显示
      transition: opacity 1s; // 平滑切换显示和隐藏
      border-radius: 6px;

      img {
        width: 100%; /* 使图片宽度自适应div宽度 */
        height: auto; /* 保持图片的宽高比 */
        border-radius: 6px;
      }

      video {
        border-radius: 6px;
      }
    }

    .video_cover {
      position: relative;
      width: 100%;
      min-height: 135px;
      height: 100%;
      transition: opacity 0.3s; /* 平滑切换显示和隐藏 */

      .play-time {
        position: absolute;
        right: 8px;
        bottom: 8px;
        z-index: 99;
        color: #fff;
      }
    }

    .pictrue_cover {
      z-index: 1; /* 确保图片在视频上方 */
      color:#fff;

      .play-counts{
        position: absolute;
        left: 12px;
        bottom:8px
      }

      .comment-counts{
        position: absolute;
        left:40px;
        bottom:8px
      }

      .duraing-time{
        position: absolute;
        right: 8px;
        bottom: 8px;
        z-index: 99;
        color: #fff;
      }
    }

    .video_cover video {
      max-width: 100%; /* 视频宽度不超过容器宽度 */
      max-height: 100%; /* 视频高度不超过容器高度 */
    }
  }

  .video-card__info {
    display: flex;
    min-height: 65px;
    margin-top: 8px;
    width: 100%; /* 使内容div宽度自适应容器宽度 */

    .video-card__info--right {
      flex: 1;
      position: relative;

      .title {
        display: -webkit-box;
        font-size: 15px;
        font-weight: 500;
        padding-right: 30px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2; /* 你可以根据实际情况调整行高 */

        &:hover {
          color: #00aaec;
        }
      }

      .video-card__info--bottom {
        display: flex;
        align-items: center;
        margin-top: 4px;
        justify-content: flex-start;
        font-size: 13px;
        color: #9499a0;

        .video-card__info--owner {
          display: inline-flex;
          align-items: center;

          svg {
            width: 17px;
            height: 17px;
            margin-right: 2px;
            fill: #9499a0;
          }

          .video-card__info--author {
            line-height: 17px;
          }

          .video-card__info--date {
            margin-left: 4px;
            line-height: 17px;
          }
        }
      }
    }
  }
}

/* 响应式设计，使内部div随容器大小变化 */
@media (min-width: 240px) {
  .feed-card,
  .video-img-panel,
  .video-card__info {
    width: 100%;
  }
}
</style>
